﻿<div class="row g-3">
    <div class="col-12 col-sm-6">
        <div class="d-flex flex-column">
            <div class="mb-1"><code>TimeSpan</code></div>
            <TimePickerBody @bind-Value="@SpanValue" />
            <BootstrapInput Value="@SpanValue" TValue="TimeSpan" Formatter="@FormatterSpanString" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
        </div>
    </div>
    <div class="col-12 col-sm-6">
        <div class="d-flex flex-column">
            <div class="mb-1"><code>string</code></div>
            <TimePickerBody @bind-Value="@TimeValue" />
            <BootstrapInput Value="@TimeValue.ToString("hh\\:mm\\:ss")" TValue="string" Readonly="true" style="width: 180px; margin-top: 0.5rem;" />
        </div>
    </div>
</div>

@code {
    private TimeSpan TimeValue { get; set; } = DateTime.Now - DateTime.Today;

    private TimeSpan SpanValue { get; set; } = DateTime.Now.Subtract(DateTime.Today);

    private static string FormatterSpanString(TimeSpan ts)
    {
        return ts.ToString("hh\\:mm\\:ss");
    }
}
